<template>
  <div class="template-panel">
    <h3>表单模板</h3>
    <div class="templates-list">
      <div
        v-for="(template, key) in templates"
        :key="key"
        class="template-item"
        @click="handleTemplateSelect(template)"
      >
        <el-icon class="template-icon">
          <Collection />
        </el-icon>
        <span class="template-label">{{ template.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Collection } from '@element-plus/icons-vue'
import { formTemplates } from '../utils/formElements.js'

export default {
  name: 'TemplatePanel',
  components: {
    Collection,
  },
  emits: ['template-select'],
  setup(props, { emit }) {
    const templates = ref(formTemplates)

    const handleTemplateSelect = (template) => {
      ElMessage.success(`已选择 ${template.name} 模板`)
      emit('template-select', template.items)
    }

    return {
      templates,
      handleTemplateSelect,
    }
  },
}
</script>

<style scoped>
.template-panel h3 {
  margin-bottom: 16px;
  color: #303133;
}

.templates-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.template-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.template-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
  transform: translateY(-2px);
}

.template-icon {
  font-size: 20px;
  color: #409eff;
  margin-right: 12px;
}

.template-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}
</style>
